<template>
  <el-dialog :append-to-body="true" title="设置可见职位" :visible.sync="jobVisible">
    <div class="select-wrapper">
      <div class="tree-wrapper">
        <el-form>
          <se-form
            placeholder="搜索职位"
            v-model="jobModel"
          ></se-form>
        </el-form>
        <div class="list-wrapper">
          <div
            class="job-item"
            v-for="item in jobList"
            :key="item.id"
            @click="handleClick(item)"
          >{{item.name}}</div>
        </div>
      </div>
      <div class="show-list">
        <div class="list-title">产品对以下职位可见</div>
        <div class="list-box">
          <div class="item" v-for="(item, index) in isSelect" :key="item.id">
            <span class="item-name">{{item.name}}</span>
            <span class="el-icon-close" @click="deleteItem(index)"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-footer" slot="footer">
      <nb-button large type="plain"  @click="jobVisible = false">取消</nb-button>
      <nb-button large  type="primary" @click="confirm">确认</nb-button>
    </div>
  </el-dialog>
</template>

<script>
  import SeForm from '@/components/se-form.vue'
  export default {
    data () {
      return {
        jobVisible: false,
        jobList: [],
        jobModel: '',
        isSelect: []
      }
    },
    props: {
      type: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      jobModel: 'getDepatList'
    },
    components: {
      SeForm
    },
    methods: {
      show (data) {
        this.isSelect = data || []
        this.jobVisible = true
      },
      getDepatList () {
        this.$store.dispatch('JOB_LIST', {param: {value: this.jobModel}}).then(res => {
          if (res.success) {
            this.jobList = res.data.list
          }
        })
      },
      confirm () {
        this.jobVisible = false
        this.$emit('success', this.isSelect)
      },
      handleClick (data) {
        let flag = false
        this.isSelect.map(item => {
          if (item.id === data.id) {
            flag = true
          }
        })
        if (!flag) {
          if (this.type) {
            this.isSelect = []
          }
          this.isSelect.push(data)
        }
      },
      deleteItem (index) {
        this.isSelect.splice(index, 1)
      }
    },
    mounted () {
      this.getDepatList()
    }
  }
</script>

<style lang="scss">
.select-wrapper{
  display: flex;
  .tree-wrapper{
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px;
    border-right: 1px solid #eeeeee;
    .list-wrapper{
      height: 400px;
      overflow-y: scroll;
      .job-item{
        cursor: pointer;
        padding: 0 10px;
      }
      .job-item:hover{
        background: #ccc;
      }
    }
  }
  .show-list{
    width: 50%;
    padding: 0 30px 0 30px;
    box-sizing: border-box;
    .list-title{
      font-size: 13px;
      color: #aaaaaa;
      padding: 8px 0 8px 10px;
    }
    .list-box{
      .item{
        line-height: 30px;
        padding: 0 10px;
        .item-name{
          font-size: 14px;
          color: #676a6c;
        }
        .el-icon-close{
          float:right;
          top: 8px;
          cursor: pointer;
          position: relative;
        }
      }
      .item:hover{
        background: #f0f7ff;
      }
    }
  }
}
</style>
